<template>
  <div class="app-container">
    <div class="center_list">
      <div class="box_title">
        <div class="text_wenben">商品名称</div>
        <div class="center_lei">
          <el-input v-model="xunzhang.goods_name" placeholder="商品名称" style="width:200px;" />
        </div>
      </div>


      <div class="box_title">
        <div class="text_wenben">商品类型</div>
        <div class="center_lei">
          <el-select v-model="xunzhang.cat_id" placeholder="商品类型" clearable class="filter-item" filterable
            style="width:200px;">
            <el-option v-for="item in classType" :key="item.cat_id" :label="item.cat_name" :value="item.cat_id" />
          </el-select>
        </div>
      </div>

      <div class="box_title" style="margin:20px 0;">
        <div class="text_wenben">商品图标</div>
        <div class="center_lei">
          <div class="imgage_" v-if="xunzhang.image">
            <img :src="xunzhang.image_full" alt="">
            <div @click="delet_image(1)">x</div>
          </div>
          <el-upload class="upload-demo" action="http://testapi2.xunyinjiaoyou.com/record/uploadImg"
            :on-remove="handleRemove" :before-remove="beforeRemove" multiple :file-list="fileList"
            :http-request="uploadFile1" ref="upload1" :on-change="onchange">
            <el-button size="small" type="primary">{{xunzhang.image?'替换':'上传'}}</el-button>
          </el-upload>
        </div>
      </div>

      <div class="box_title" style="margin:20px 0;">
        <div class="text_wenben">动效文件</div>
        <div class="center_lei">
          <div class="imgage_" v-if="xunzhang.image_file">
            <span>{{xunzhang.image_file}}</span>
            <div @click="delet_image(2)">x</div>
          </div>

          <el-upload class="upload-demo" action="http://testapi2.xunyinjiaoyou.com/record/uploadImg"
            :on-remove="handleRemove" :before-remove="beforeRemove" multiple :file-list="fileList"
            :http-request="uploadFile2" ref="upload2" :on-change="onchange">
            <el-button size="small" type="primary">{{xunzhang.image_file?'替换':'上传'}}</el-button>
          </el-upload>
        </div>
      </div>


      <div class="box_title">
        <div class="text_wenben">原价</div>
        <div class="center_lei">
          <el-input v-model="xunzhang.old_diamond" placeholder="原价" style="width:200px;"
            onkeyup="value=value.replace(/^(0+)|[^\d]+/g,'')" />
        </div>
        <span style="font-size:14px;padding-left:10px">钻</span>
      </div>

      <div class="box_title">
        <div class="text_wenben">价值</div>
        <div class="center_lei">
          <el-input v-model="xunzhang.diamond" placeholder="价值" style="width:200px;"
            onkeyup="value=value.replace(/^(0+)|[^\d]+/g,'')" />
        </div>
        <span style="font-size:14px;padding-left:10px">钻</span>
      </div>

      <div class="box_title">
        <div class="text_wenben">库存</div>
        <div class="center_lei">
          <el-input v-model="xunzhang.goods_num" placeholder="库存" style="width:200px;"
            onkeyup="value=value.replace(/^(0+)|[^\d]+/g,'')" />
        </div>
      </div>

      <div class="box_title">
        <div class="text_wenben">有效期</div>
        <div class="center_lei">
          <el-input v-model="xunzhang.day" placeholder="有效天数" style="width:200px;"
            onkeyup="value=value.replace(/^(0+)|[^\d]+/g,'')" />
        </div>
      </div>

      <div class="box_title">
        <div class="text_wenben">排序</div>
        <div class="center_lei">
          <el-input v-model="xunzhang.sort" placeholder="排序" style="width:200px;"
            onkeyup="value=value.replace(/^(0+)|[^\d]+/g,'')" />
        </div>
      </div>



      <div class="box_title">
        <div class="text_wenben">是否显示</div>
        <div class="center_lei">
          <el-radio-group v-model="xunzhang.is_show">
            <el-radio :label="1">是</el-radio>
            <el-radio :label="2">否</el-radio>
          </el-radio-group>
        </div>
      </div>

      <div class="box_title">
        <el-button class="filter-item" type="primary" @click="medal_sbmit">
          保存
        </el-button>
      </div>


    </div>
  </div>
</template>
<script>
  import Pagination from "@/components/Pagination"; // secondary package based on el-pagination
  import {
    encryption2
  } from "@/api/index";
  export default {
    name: "shopping_list_de_chat",
    components: {
      Pagination,
    },
    data() {
      return {
        xunzhang: {
          goodsId: '',
          goods_name: '',
          cat_id: '',
          image: '',
          image_file: '',
          old_diamond: '',
          diamond: '',
          goods_num: '',
          day: '',
          sort: '',
          is_show: 2,
        },
        classType: [{
          cat_id: 1,
          cat_name: '座驾'
        }, {
          cat_id: 2,
          cat_name: '头像框'
        }, {
          cat_id: 3,
          cat_name: '个性名片'
        }, {
          cat_id: 4,
          cat_name: '进场特效'
        }, ],
        fileList: [], //上传图片
        isadd: true, //新增——编辑
      };
    },
    watch: {

    },
    created() {
      if (this.$route.query.type == 2) { //编辑
        this.xunzhang = this.$route.query.row;
        this.isadd = false;
      } else {
        this.isadd = true;
        this.xunzhang = {
          goodsId: '',
          goods_name: '',
          cat_id: '',
          image: '',
          image_full: '',
          image_file: '',
          image_file_full: '',
          old_diamond: '',
          diamond: '',
          goods_num: '',
          day: '',
          sort: '',
          is_show: 2,
        }
      }
    },
    methods: {
      delet_image(index) {
        if (index == 1) {
          this.xunzhang.image = '';
          this.xunzhang.image_full = '';
          this.$refs.upload1.clearFiles();
        } else if (index == 2) {
          this.xunzhang.image_file = '';
          this.xunzhang.image_file_full = '';
          this.$refs.upload2.clearFiles();

        }
      },
      //判断保存还是编辑
      medal_sbmit() {
        if (!this.isadd) {
          this.editmedal(); //编辑
        } else {
          this.addmedal(); //新增
        }
      },
      addmedal() {
        const arys = {
          goods_name: this.xunzhang.goods_name ? this.xunzhang.goods_name : '',
          cat_id: this.xunzhang.cat_id ? this.xunzhang.cat_id : '',
          image: this.xunzhang.image ? this.xunzhang.image : '',
          image_file: this.xunzhang.image_file ? this.xunzhang.image_file : '',
          old_diamond: this.xunzhang.old_diamond ? this.xunzhang.old_diamond : '',
          diamond: this.xunzhang.diamond ? this.xunzhang.diamond : '',
          goods_num: this.xunzhang.goods_num ? this.xunzhang.goods_num : '',
          day: this.xunzhang.day ? this.xunzhang.day : '',
          sort: this.xunzhang.sort ? this.xunzhang.sort : '',
          is_show: this.xunzhang.is_show ? this.xunzhang.is_show : '',
        };
        const url = "/good/goodAdd";
        encryption2(arys, url).then((res) => {
          if (res.data.status == 0) {
            this.$message({
              message: res.data.text,
              type: "success",
            });
            this.$store.dispatch("tagsView/delView", this.$route);
            this.$router.go(-1);
          } else {
            this.$message({
              message: res.data.text,
              type: "error",
            });
          }
        });
      },
          editmedal() {
        const arys = {
          goodsId:this.xunzhang.goods_id ? this.xunzhang.goods_id : '',
          goods_name: this.xunzhang.goods_name ? this.xunzhang.goods_name : '',
          cat_id: this.xunzhang.cat_id ? this.xunzhang.cat_id : '',
          image: this.xunzhang.image ? this.xunzhang.image : '',
          image_file: this.xunzhang.image_file ? this.xunzhang.image_file : '',
          old_diamond: this.xunzhang.old_diamond ? this.xunzhang.old_diamond : '',
          diamond: this.xunzhang.diamond ? this.xunzhang.diamond : '',
          goods_num: this.xunzhang.goods_num ? this.xunzhang.goods_num : '',
          day: this.xunzhang.day ? this.xunzhang.day : '',
          sort: this.xunzhang.sort ? this.xunzhang.sort : '',
          is_show: this.xunzhang.is_show ? this.xunzhang.is_show : '',
        };
        const url = "/good/goodEdit";
        encryption2(arys, url).then((res) => {
          if (res.data.status == 0) {
            this.$message({
              message: res.data.text,
              type: "success",
            });
            this.$store.dispatch("tagsView/delView", this.$route);
            this.$router.go(-1);
          } else {
            this.$message({
              message: res.data.text,
              type: "error",
            });
          }
        });
      },

      handleRemove(file, fileList) {
        let uid = file.uid;
        this.fileList.forEach((file, index) => {
          if (file.uid == uid) {
            this.fileList.splice(index, 1)
          }
        })
      },
      handlePreview(file) {
      },

      onchange(file, fileList) {
        if (fileList.length > 1) {
          fileList.splice(0, 1);
        }
      },
      beforeRemove(file, fileList) {
        // return this.$confirm(`确定移除 ${ file.name }？`);
      },
      uploadFile1(param) {
        var that = this; //避免this指针在后面的请求以后改变
        var fileObj = param.file;
        // this.uploadAction是接收上传文件的后台地址
        var FileController = "http://testadmin-api.xunyinjiaoyou.com/admin/fileUpload";
        // FormData 对象
        var forms = new FormData();
        // 文件对象
        forms.append("common_file", fileObj);
        // XMLHttpRequest 对象
        var xhr = new XMLHttpRequest();
        xhr.open("post", FileController, true);
        xhr.onload = function () {
          var strData = xhr.response; //回传的数据接受
          var jsonData = JSON.parse(strData); //这里由于后端接口返回的是String，而后面需要的是json
          if (jsonData.status == 0) {

            that.xunzhang.image = jsonData.result.url; //取出json中对应需要的数据存入form表单中
            that.xunzhang.image_full = jsonData.result.full_url; //取出json中对应需要的数据存入form表单中

            that.$message({
              message: jsonData.text,
              type: "success",
            });
          } else {
            that.$message({
              message: jsonData.text,
              type: "error",
            });
          }
        };
        xhr.send(forms);
      },
      uploadFile2(param) {
        var that = this; //避免this指针在后面的请求以后改变
        var fileObj = param.file;
        // this.uploadAction是接收上传文件的后台地址
        var FileController = "http://testadmin-api.xunyinjiaoyou.com/admin/fileUpload";
        // FormData 对象
        var forms = new FormData();
        // 文件对象
        forms.append("common_file", fileObj);
        // XMLHttpRequest 对象
        var xhr = new XMLHttpRequest();
        xhr.open("post", FileController, true);
        xhr.onload = function () {
          var strData = xhr.response; //回传的数据接受
          var jsonData = JSON.parse(strData); //这里由于后端接口返回的是String，而后面需要的是json
          if (jsonData.status == 0) {
            that.xunzhang.image_file = jsonData.result.url; //取出json中对应需要的数据存入form表单中
            that.xunzhang.image_file_full = jsonData.result.full_url; //取出json中对应需要的数据存入form表单中
            that.$message({
              message: jsonData.text,
              type: "success",
            });
          } else {
            that.$message({
              message: jsonData.text,
              type: "error",
            });
          }
        };
        xhr.send(forms);
      },

    }
  };
</script>
<style scoped>
  .center_list {
    width: 1000px;
    display: flex;
    flex-direction: column;
  }

  .box_title {
    margin: 10px 0 10px 0;
    display: flex;
    align-items: center;
  }

  .flex_cloumn {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  .flex_cloumn>div {
    display: flex;
    margin: 10px 0;
  }

  .text_wenben {
    width: 100px;
    height: 40px;
    display: flex;
    align-items: center;
    font-size: 15px;
    color: #333;
    font-weight: 500;
  }

  .center_lei {
    flex-shrink: 0;
    height: 40px;
    display: flex;
    align-items: center;
    margin-left: 10px;
    position: relative;

  }

  .center_lei>.imgage_ {
    /* width: 50px; */
    max-height: 50px;
    margin-right: 10px;
  }

  .imgage_>img {
    width: 50px;
    max-height: 50px;
    margin-right: 10px;
  }

  .imgage_>span {
    font-size: 12px;
    color: #333;
  }

  .imgage_>div {
    width: 50px;
    height: 50px;
    /* background: #99999950; */
    position: absolute;
    border-radius: 10px;
    font-style: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    top: 0%;
    display: none;
  }

  .imgage_:hover>div {
    display: block;
    cursor: pointer;
  }

  .Reward {
    margin-left: 40px;
    font-size: 14px;
  }

  .Reward span {
    padding-right: 20px;
  }
</style>